import React, { memo, Fragment, useState, useEffect, useCallback } from "react";
import { withRouter } from "react-router-dom";
import { message } from "antd";
import Qs from "qs";
import "moment/locale/zh-cn";
import moment from "moment";

import { custom } from "services/common";
import { nation, face, education } from "global/data";
import {
  validateEmail,
  validatePeople,
  validatePhone,
} from "utils/validate.js";

import HYFormCom from "components/form/index";

const HYStaffAdd = memo(function (props: any) {
  const formItem = [
    {
      type: "Column",
      label: "个人信息",
      className: "staffTitle",
    },
    {
      type: "Input",
      label: "姓名",
      name: "name",
      required: true,
      style: { width: "250px" },
      placeholder: "请输入姓名",
    },
    {
      type: "Radio",
      label: "性别",
      name: "sex",
      required: true,
      style: { width: "250px" },
      options: [
        { label: "男", value: true },
        { label: "女", value: false },
      ],
    },
    {
      type: "Upload",
      label: "头像",
      name: "face_img",
      // required: true,
      style: { width: "250px" },
      placeholder: "请上传头像",
      message: "请上传头像",
    },
    {
      type: "Upload",
      label: "毕业证",
      name: "diploma_img",
      style: { width: "250px" },
      placeholder: "请上传毕业证",
    },
    {
      type: "Input",
      label: "身份证",
      name: "card_id",
      required: true,
      style: { width: "250px" },
      placeholder: "请填写身份证",
      rules: [
        // { getFieldValue }下面有这个参数
        () => ({
          validator(rule: any, value: any) {
            if (value && validatePeople(value)) {
              return Promise.reject("请输入正确身份证号码！");
            }
            return Promise.resolve();
          },
        }),
      ],
    },
    {
      type: "Input",
      label: "手机号",
      name: "phone",
      required: true,
      style: { width: "250px" },
      placeholder: "请填写手机号",
      rules: [
        () => ({
          validator(rule: any, value: any) {
            if (value && validatePhone(value)) {
              return Promise.reject("请输入正确手机号码！");
            }
            return Promise.resolve();
          },
        }),
      ],
    },
    {
      type: "Select",
      label: "民族",
      name: "nation",
      required: true,
      style: { width: "250px" },
      options: nation,
      placeholder: "请选择民族",
    },
    {
      type: "Date",
      label: "出生年月",
      name: "birthday",
      required: true,
      style: { width: "250px" },
      placeholder: "请填写出生年月",
      format: "yyyy-mm",
      picker: "month",
    },
    {
      type: "Select",
      label: "政治面貌",
      name: "political",
      required: false,
      style: { width: "250px" },
      options: face,
      placeholder: "团员-党员-群众",
    },
    {
      type: "Select",
      label: "毕业院校",
      name: "school",
      required: false,
      options: education,
      style: { width: "250px" },
      placeholder: "毕业院校",
    },
    {
      type: "Input",
      label: "学历",
      name: "education",
      required: false,
      style: { width: "250px" },
      placeholder: "学历",
    },
    {
      type: "Input",
      label: "专业",
      name: "major",
      required: false,
      style: { width: "250px" },
      placeholder: "专业",
    },
    {
      type: "Input",
      label: "微信号",
      name: "wechat",
      required: false,
      style: { width: "250px" },
      placeholder: "微信号",
    },
    {
      type: "Input",
      label: "个人邮箱",
      name: "email",
      required: true,
      style: { width: "250px" },
      placeholder: "个人邮箱",
      rules: [
        () => ({
          validator(rule: any, value: any) {
            if (!value) {
              return Promise.reject("请输入个人邮箱！");
            } else if (validateEmail(value)) {
              return Promise.reject("请输入正确邮箱！");
            }
            return Promise.resolve();
          },
        }),
      ],
    },
    {
      type: "Column",
      label: "就职信息",
      className: "staffTitle",
    },
    {
      type: "SelectComponent",
      label: "职位",
      name: "job_id",
      required: true,
      style: { width: "250px" },
      placeholder: "选择职位",
      url: "/job/listAll/",
      propsKey: { label: "jobName", value: "jobId" },
    },
    {
      type: "formItemInline",
      label: "职位状态",
      inline_formItem: [
        {
          type: "Date",
          label: "入职日期",
          name: "job_entry_date",
          required: false,
          style: { width: "100%" },
          placeholder: "请选择入职日期",
          format: "YYYY/MM/DD",
        },
        {
          type: "Date",
          label: "转正日期",
          name: "job_formal_date",
          required: false,
          style: { width: "100%" },
          placeholder: "请选择转正日期",
          format: "YYYY/MM/DD",
        },
        {
          type: "Date",
          label: "离职日期",
          name: "job_quit_date",
          required: false,
          style: { width: "100%" },
          placeholder: "请选择离职日期",
          format: "YYYY-MM-DD",
        },
      ],
    },
    {
      type: "Select",
      label: "禁启用",
      options: "status",
      style: { width: "250px" },
      name: "status",
      required: true,
    },
    {
      type: "Input",
      label: "公司邮箱",
      name: "company_email",
      required: true,
      style: { width: "250px" },
      placeholder: "公司邮箱",
      rules: [
        () => ({
          validator(rule: any, value: any) {
            if (!value) {
              return Promise.reject("请输入公司邮箱！");
            } else if (validateEmail(value)) {
              return Promise.reject("请输入正确邮箱！");
            }
            return Promise.resolve();
          },
        }),
      ],
    },
    {
      type: "Editor",
      label: "描述",
      name: "introduce",
      style: { width: "250px" },
    },
  ];
  const formLayout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 22 },
  };
  const initialValues = {
    status: false,
    number: 0,
  };
  // 状态
  const [isEdit, setIsEdit] = useState(false);
  const [id, setId] = useState<string>();
  const [editData, setEditData] = useState({});
  // 生命周期
  const handleParams = useCallback(async () => {
    const search = props.location.search;
    if (search) {
      const id = Qs.parse(search)["?id"];
      const ids = id as string;
      if (!!ids) {
        setIsEdit(true);
        setId(ids);
        edit(ids);
      }
    }
  }, [props.location.search]);
  useEffect(() => {
    handleParams();
  }, [handleParams]);

  const edit = async (id: string) => {
    const res: any = await custom({
      url: "/staff/detailed/",
      data: { id: +id },
    });
    const formatData = {
      birthday: res.data.birthday ? moment(res.data.birthday) : null,
      job_entry_date: res.data.job_entry_date
        ? moment(res.data.job_entry_date)
        : null,
      job_formal_date: res.data.job_formal_date
        ? moment(res.data.job_formal_date)
        : null,
      job_quit_date: res.data.job_quit_date
        ? moment(res.data.job_quit_date)
        : null,
    };

    const editData = { ...res.data, ...formatData };
    setEditData({ ...editData });
  };
  //
  const onFinish = async (params: any, form: any) => {
    // 这里日期需要单独处理
    const formatData = {
      birthday: params.birthday
        ? moment(params.birthday).format("YYYY/MM")
        : null,
      job_entry_date: params.job_entry_date
        ? moment(params.job_entry_date).format("YYYY/MM/DD")
        : null,
      job_formal_date: params.job_formal_date
        ? moment(params.job_formal_date).format("YYYY/MM/DD")
        : null,
      job_quit_date: params.job_quit_date
        ? moment(params.job_quit_date).format("YYYY/MM/DD")
        : null,
    };
    const requestData = { ...params, ...formatData };
    try {
      //  添加 修改
      // 这里修改不了 参数穿对了 不知道是后端问题 还是 那里问题 
      if (id) {
        requestData.staff_id = +id;
        const res: any = await custom({
          url: "/staff/edit/",
          data: requestData,
        });
        message.success(res.message);
      } else {
        const res: any = await custom({
          url: "/staff/add/",
          data: requestData,
        });
        message.success(res.message);
      }
      form.resetFields();
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <Fragment>
      <HYFormCom
        formItem={formItem}
        formLayout={formLayout}
        submit={onFinish}
        editData={editData}
        initialValues={initialValues}
        isEdit={isEdit}
      />
    </Fragment>
  );
});

export default withRouter(HYStaffAdd);
